<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">登录日志</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        记录员工登入/登出系统的日志
                        <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="/">首页</a><span>/</span>日志<span>/</span>登录日志</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="登录账户/用户名" v-model="conditions['loginName#name'].value" clearable class="minW40 z_input-holder"></el-input>
                        <div class="data-picker clearfix">
                            <el-date-picker id="startTime"
                                            v-model="conditions.timestamp.value[0]"
                                            type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd 00:00:00"
                                            placeholder="起始日期">
                            </el-date-picker>
                            <div class="center-line"></div>
                            <el-date-picker id="endTime"
                                            v-model="conditions.timestamp.value[1]"
                                            type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd 23:59:59"
                                            placeholder="截至日期">
                            </el-date-picker>
                        </div>
                        <el-select placeholder="登入/登出" v-model="conditions.type.value" clearable class="z_select-holder">
                            <el-option
                                    v-for="type in typeList"
                                    :key="type.value"
                                    :label="type.name"
                                    :value="type.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-icon-delete" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="logList" style="width: 100%;">
                    <el-table-column fixed type="index" class-name="z-opt_btn"></el-table-column>
                    <el-table-column prop="loginName" label="登录账号"  min-width="100"></el-table-column>
                    <el-table-column prop="username" label="用户名" min-width="100"></el-table-column>
                    <el-table-column prop="time" label="时间" min-width="140"></el-table-column>
                    <el-table-column prop="ip" label="IP" min-width="140"></el-table-column>
                    <el-table-column prop="type" label="登入/登出" :formatter="typeFormatter" min-width="100"></el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            typeList: [{"name": "登入", "value": 1}, {"name": "登出", "value": 2}],
            logList: [],
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "loginName#name": {
                    "operation": "ORLIKE",
                    "value": undefined
                },
                "time": {
                    "operation": "BETWEEN",
                    "value": []
                },
                "type": {
                    "operation": "EQ",
                    "value": undefined
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
        },
        created: function () {
            this.queryList();
        },
        methods: {
            typeFormatter: function (row, column, cellValue, position) {
                for (let type of this.typeList) {
                    if (type.value === cellValue) {
                        return type.name;
                    }
                }
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions['loginName#name'].value = undefined;
                this.conditions.timestamp.value = [];
                this.conditions.type.value = undefined;
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            queryList() {
                let self = this;
                self.loading = true;

                if (self.conditions) {
                    if (!self.conditions.timestamp.value[0] && self.conditions.timestamp.value[1]) {
                        self.$message({
                            message: '请选择查询起始日期',
                            type: 'warning',
                            customClass: 'message-center',
                            duration: 1500,
                            onClose: function () {
                                $('#startTime').focus();
                            }
                        });
                        return;
                    }
                    if (self.conditions.timestamp.value[0] && !self.conditions.timestamp.value[1]) {
                        self.$message({
                            message: '请选择查询截至日期',
                            type: 'warning',
                            customClass: 'message-center',
                            duration: 1500,
                            onClose: function () {
                                $('#endTime').focus();
                            }
                        });
                        return;
                    }
                }

                let queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "time": "desc"
                    }
                };
                $.ajax({
                    url: "/vendor/systemlog/loginlog/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.logList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            }
        }
    });

</script>
</html>